{extend name="base"}
{block name="main"}
<div id="ws-app" v-cloak>
	<el-menu mode="horizontal" :default-active="wsNav.activeIndex">
		<el-menu-item :index="v.name" v-for="v of nav" class="p0">
			<a class="block p_x20" :href="v.href" v-text="v.title"></a>
		</el-menu-item>
	</el-menu>
	<el-row class="ws-quote">
		<el-col :span="10" >
			任务管理器
		</el-col>
	</el-row>
	<el-row>
		<el-col :span="24">
			<el-table
				default-expand-all
				
			    :data="tableData"
			    :row-style="rowStyle"
			    style="width: 100%">
			    <el-table-column type="expand">
			      <template slot-scope="props">
			        <el-table
        				stripe
        			    :data="props.row.tasks"
        			    size="mini"
        			    border
        			    empty-text="该设备暂无可执行的任务"
        			    style="width: 100%">
				    	    </el-table-column>
        			    	<el-table-column
				    	        prop="id"
				    	        label="编号"
				    	        >
				    	    </el-table-column>
				    	    <el-table-column
				    	        prop="task_id"
				    	        label="任务ID"
				    	        >
				    	    </el-table-column>
				    	    <el-table-column
				    	        prop="title"
				    	        label="标题"
				    	        >
				    	    </el-table-column>
				    	    <el-table-column
				    	        prop="msg"
				    	        label="内容"
				    	        >
				    	    </el-table-column>
				    	    <el-table-column
				    	        prop="remark"
				    	        label="说明"
				    	        >
				    	    </el-table-column>
				    	    <el-table-column
				    	        prop="s_time"
				    	        label="创建时间"
				    	        :formatter="dateFormats"
				    	        >
				    	    </el-table-column>
				    	    <el-table-column
				    	        prop="start_time"
				    	        label="开始时间"
				    	        :formatter="startTaskFormats"
				    	        >
				    	    </el-table-column>
				    	    <el-table-column
				    	        prop="state"
				    	        label="状态"
				    	        >
				    	        <!-- if(cellValue==1){
				    	        	return "<span style='color:#67C23A;'>●</span>执行中";
				    	        }else{
				    	        	return "<span style='color:#E6A23C;'>●</span>等待";
				    	        } -->
				    	        <template slot-scope="d">
				    	        	<span v-if="d.row.state" style="color: #666;">
				    	        		<span style='color:#67C23A;padding-right: 2px;'>●</span>执行中
				    	        	</span>
				    	        	<span v-else style="color: #666;">
				    	        		<span style='color:#E6A23C;padding-right: 2px;'>●</span>等待
				    	        	</span>
				    	        </template>
				    	    </el-table-column>
				    	    <el-table-column label="操作">
				    	    	<template slot-scope="scope">
				    	    		<el-button type="danger" size="mini" class="ws-mini" v-if="!scope.row.state" @click="remove(props,scope)">移除</el-button>
				    	    		<el-button type="success" size="mini" class="ws-mini" v-if="scope.row.state" @click="_wspost('{:url(\'finish\')}',{device_id:props.row.device_id},null,false)">完成该任务</el-button>

				    	    		<el-button type="warning" size="mini" class="ws-mini" v-if="scope.$index>1" icon="el-icon-arrow-up" @click="upRecord(props,scope)"></el-button>

				    	    		<el-button type="warning" size="mini" class="ws-mini" v-if="!scope.row.state&&scope.$index<props.row.tasks.length-1" icon="el-icon-arrow-down" @click="downRecord(props,scope)"></el-button>
				    	    	</template>
				    	    </el-table-column>
    			    </el-table>
			      </template>
			    </el-table-column>
			    <el-table-column
			      label="设备 ID"
			      prop="device_id">
			    </el-table-column>
			    <el-table-column
			      label="设备名称"
			      prop="dev_name">
			    </el-table-column>
			</el-table>
		</el-col>
	</el-row>
	<el-row style="height: 50px;width: 100%;">
	</el-row>
</div>
<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
{/block}

<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>

{block name="vue"}
<script type="text/babel" type="text/javascript">
var app=new Vue({
	el:'#ws-app',
	mixins:[wsMixins],
	data:{
		nav:{$_nav|raw},
		offLine:{$offLine}, //是否离线
		tableData:{$list|raw},
		devices:[], //在线设备ID
	},
	created(){
		this.init();
		
	},
	methods:{
		rowStyle(){
			return {'background-color':'#eee'}
		},
		_getUsers(){
			socket.emit('_getUsers',{});
		},
		init(){
			if(socket){
				// 获取在线设备
				socket.on('getUsers',data=>{
				    if(data){
				    	this.devices=data;
				    	this.getData(data);
				    }
				})
				socket.emit('getUsers',{});
				// 在线对象
				socket.on('_getUsers',data=>{
				    console.log('_getUsers',data)
				})
				// 更新设备数据
				socket.on('updateDev',res=>{
					// （bug）当用户不选择设备时（res.data为null任务列表不会刷新）
					let data=res.data;
				    this.updateDev(data);
				})
			}

		},
		// 获取在线设备(包含任务表)
		getData(devices){
			if(this.offLine)return;
			devices=devices||this.devices;
			$.post("{:url('getData')}",{ids:devices},res=>{
				if(res&&res.data){
					let data=res.data;
					if(typeof data==='string'){
						data=JSON.parse(data);
					}
					this.tableData=data;
				}else{
					this.tableData=[];
				}

			},'json');

		},
		// 获取在线设备
		getDevices(data){
			if(!data)return;
			$.post("{:url('getDevices')}",{ids:data},res=>{
				if(res&&res.data){
					let data=res.data;
					if(typeof data==='string'){
						data=JSON.parse(data);
					}
					this.devices=data;
				}else{
					this.devices=[];
				}

			},'json');
		},
		// 更新设备（当前设备新增任务、完成任务时触发 保证数据统一）
		updateDev(ids){
			if(!ids)return;
			if(typeof ids==='string'){
				ids=JSON.parse(ids)
			}
			let devs=this.tableData;
			$.post("{:url('getData')}",{ids},res=>{
				if(!res){
					return;
				}
				if(typeof res==='string'){
					res=JSON.parse(res);
				}

				res.data.forEach(v=>{
					devs.forEach((item,i)=>{
						if(item.device_id==v.device_id){
							devs.splice(i,1,v);
						}
					})
				})
			},'json');
			
		},
		// 状态格式化
		stateFormat(row, column, cellValue, index){
			console.log(cellValue)
			if(cellValue==1){
				return "<span style='color:#67C23A;'>●</span>执行中";
			}else{
				return "<span style='color:#E6A23C;'>●</span>等待";
			}
		},
		// 任务移除、上移、下移操作
		remove(dev,task){
			// this.$confirm("确认移除该任务？",'提示信息',{
			// 	type:'warning'
			// }).then(_=>{
				let tasks=dev.row.tasks;
				$.post("{:url('remove')}",{device_id:dev.row.device_id,id:tasks[task.$index].id},res=>{
					if(typeof res==='string'){
					    res=JSON.parse(res);
					}
					let type='success';
					if(res.code===0){
					    type='error'
					}else{
						tasks.splice(task.$index,1);
					}
					if(res.msg){
					    this.$message({
					        message:res.msg,
					        type
					    })
					}
				})
				
			//}).catch(err=>{})
		},
		upRecord(dev,task){
			let i=task.$index;
			if(i<2)return;
			let tasks=dev.row.tasks;
			let t1=tasks[i],t2=tasks[i-1];
			let data=[
				{id:t1.id,sort:t2.sort},
				{id:t2.id,sort:t1.sort},
			];
			$.post("{:url('record')}",{device_id:dev.row.device_id,val:data},res=>{
				if(typeof res==='string'){
				    res=JSON.parse(res);
				}
				if(res.code!==0){
					let temp=t1.sort;
					t1.sort=t2.sort;t2.sort=temp;
				    tasks.splice(i-1,2,t1,t2);
				}else if(res.code===0&&res.msg){
					this.$message({
					    message:res.msg,
					    type:'error'
					})
				}
			})
			
		},
		downRecord(dev,task){
			let i=task.$index;
			let tasks=dev.row.tasks;
			if(i===tasks.length){
				return;
			}
			let t1=tasks[i+1],t2=tasks[i];
			let data=[
				{id:t1.id,sort:t2.sort},
				{id:t2.id,sort:t1.sort},
			];
			$.post("{:url('record')}",{device_id:dev.row.device_id,val:data},res=>{
				if(typeof res==='string'){
				    res=JSON.parse(res);
				}
				if(res.code!==0){
					let temp=t1.sort;
					t1.sort=t2.sort;t2.sort=temp;
				    tasks.splice(i,2,t1,t2);
				}else if(res.code===0&&res.msg){
					this.$message({
					    message:res.msg,
					    type:'error'
					})
				}
			})
			
		},
	}
});
</script>
{/block}